<template>
    <div class="app-container">
        <el-form ref="searchForm" inline :model="searchForm" style="position:relative;">
            <el-row>
                <el-col :span="20">
                    <el-form-item label="加盟区域：" prop="districtId">
                        <el-cascader clearable :options="districtList" :props="optionProps" v-model="searchForm.districtId" change-on-select></el-cascader>
                    </el-form-item>
                    <el-form-item label="加盟类型：" prop="merchantTypeId">
                        <el-select clearable v-model="searchForm.merchantTypeId" placeholder="请选择">
                            <el-option v-for="item in merchantTypeOpt" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button @click="init('search')" type="primary">查询</el-button>
                </el-col>
                <el-col :span="4">
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="applyStatus" :formatter="applyStatusFun" label="申请状态" align="center"></el-table-column>
            <el-table-column prop="companyName" label="公司名称" align="center"></el-table-column>
            <el-table-column prop="description" label="描述" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="districtName" label="区域" align="center"></el-table-column>
            <el-table-column prop="merchantTypeName" label="加盟商类型" align="center" width="100"></el-table-column>
            <el-table-column prop="phone" label="联系电话" align="center" width="110"></el-table-column>
            <el-table-column prop="principal" label="负责人" align="center"></el-table-column>
            <el-table-column prop="mobile" label="用户" align="center" width="110"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160" align="center"></el-table-column>
            <el-table-column label="操作" width="200" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button @click.stop="statusClick(scope.row,1)" type="primary" plain size="mini" v-show="scope.row.applyStatus == 0">审核通过</el-button>
                    <el-button @click.stop="statusClick(scope.row,-1)" type="danger" plain size="mini" v-show="scope.row.applyStatus == 0">审核失败</el-button>
                    <el-button type="info" plain size="mini" v-show="scope.row.applyStatus != 0">已审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements" style="margin-top: 20px;"></el-pagination>
    </div>
</template>
<script>
import { findDistrictAllRegion } from '@/api/system/district-module/region'
import { findMerchantType } from '@/api/service-provider/merchant-type'
import { addMerchantApply, findMerchantApply, detailMerchantApply, editMerchantApply, delMerchantApply } from '@/api/service-provider/merchant-apply'
import { getCookie, setCookie } from '@/utils/auth'
export default {
    name: 'Apply',
    data() {
        return{
            tableData: [],
            nowTit: '',
            nowId: '',
            showDialog: false,
            searchForm:{
                districtId: [],
                merchantTypeId: '',
                phone: ''
            },
            nowPage: 0,
            pageSize: 10,
            imageUrl: '',
            formData: {},
            popStatus: 0,  //0为添加，1为修改
            pageData: {},
            applicationIdOpt: [],
            districtList: [],
            optionProps: {
                value: 'id',
                label: 'name',
                children: 'children'
            },
            merchantTypeOpt: [],
        }
    },
    methods: {
        //默认函数
        init(params){
            const _this = this;
            if(params == 'search'){
                _this.nowPage = 0
            }
            let cid = '';
            if(this.searchForm.districtId.length != 0){
                cid = this.searchForm.districtId[this.searchForm.districtId.length - 1];
            }
            //获取列表信息
            findMerchantApply(_this.nowPage, _this.pageSize,cid, _this.searchForm.merchantTypeId,'','').then(response => {
                if(response.code == 200){
                    _this.pageData = response.object;
                    _this.tableData = response.object.content;
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //区域
        districtFun(){
            const _this = this;
            //获取列表信息
            findDistrictAllRegion().then(response => {
                if(response.code == 200){
                    _this.districtList = _this.getTreeData(response.object);
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //递归
        getTreeData(data){
            for(var i=0;i<data.length;i++){
                if((data[i].children == null) || (data[i].children.length<1)){
                    data[i].children=undefined;
                }else {
                    this.getTreeData(data[i].children);
                }
            }
            return data;
        },
        //商家类型
        merchantTypeList(){
            const _this = this;
            //获取列表信息
            findMerchantType( 0, 10000).then(response => {
                if(response.code == 200){
                    if(response.object){
                        _this.merchantTypeOpt = response.object.content;
                    }
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //添加
        addClick(){
            this.popStatus = 0;
            this.showDialog = true;
            this.dataForm.code = '',
            this.dataForm.description = '',
            this.dataForm.name = '';
            this.dataForm.sort = '';
            this.dataForm.usingStatus = 1;
            if(this.dataForm.id){
                delete this.dataForm.id;
            }
        },
        //提交添加
        addSubmit(formName){
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //提交
                    if(_this.popStatus == 0){  //添加
                        addMerchantApply(_this.dataForm).then(response => {
                            if(response.code == 200){
                                this.$message.success(response.message);
                                _this.init();
                                _this.showDialog = false;
                            }else{
                                this.$message.error(response.message);
                            }
                        })
                    }else if(_this.popStatus == 1){  //修改
                        _this.dataForm.id = _this.nowId;
                        editMerchantApply(_this.dataForm).then(response => {
                            if(response.code == 200){
                                this.$message.success(response.message);
                                _this.init();
                                _this.showDialog = false;
                            }else{
                                this.$message.error(response.message);
                            }
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //删
        delClick(row){
            let _this = this;
            this.$confirm('确定删除 '+row.companyName+' 的加盟申请吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //删除
                delMerchantApply(row.id).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //取消
        cancelClick(formName){
            this.showDialog = false;
            this.$refs[formName].resetFields();
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        },
        applyStatusFun(row){
            if(row.applyStatus == 0){
                return '审核中'
            }else if(row.applyStatus == 1){
                return '申请通过'
            }else if(row.applyStatus == -1){
                return '申请失败'
            }
        },
        statusClick(row,type){
            let usingStatus,isUsing;
            if(type == -1){  //启用状态
                usingStatus = -1;
                isUsing = '失败';
            }else if(type == 1){
                usingStatus = 1;
                isUsing = '通过';
            }
            let _this = this;
            this.$confirm('确定修改状态为 '+ isUsing +' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //审核
                let obj = {};
                obj.companyName = row.companyName;
                obj.description = row.description;
                obj.districtId = row.districtId;
                obj.merchantTypeId = row.merchantTypeId;
                obj.phone = row.phone;
                obj.principal = row.principal;
                obj.sysUserId = row.sysUserId;
                obj.applyStatus = usingStatus;
                obj.id = row.id;
                editMerchantApply(obj).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
    },
    mounted(){
        this.init();
        this.merchantTypeList();
        this.districtFun();
    }
}
</script>